<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
  </ul>
</body>
</html>

<script>
  // 作用域

  // - 什么是作用域，就是一个变量可以生效的范围
  //   - 变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域
  //   - 也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
  // - 作用域分类
  //   - 全局作用域
  //   - 局部作用域也叫私有作用域或者函数作用域
  // - 作用域上下级关系
  //   - 你在哪一个作用域下书写的函数, 就是哪一个作用域的子级作用域



  // ### 1) 全局作用域
  // - 全局作用域是最大的作用域
  // - 在全局作用域中定义的变量可以在任何地方使用
  // - 页面打开的时候，浏览器会自动给我们生成一个全局作用域 window
  // - 这个作用域会一直存在，直到页面关闭就销毁了

  // console.log(window);

  // 在js的顶层用var定义的变量或者function定义的声明式函数，其实是直接挂载到了window对象下
  // 就可以在任何地方通过window.xxx访问到这个变量
  // 同时window.又可以省略

  // var count = 10;
  // console.log(window);
  // console.log(window.count);

  // if (true) {
  //   console.log(count);
  // }
  // function fn() {
  //   console.log(count);
  // }
  // console.log(window);
  // fn();








  // ### 2) 局部作用域
  // - 局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
  // - 在局部作用域中定义的变量只能在这个局部作用域内部使用
  // - **在 JS 中只有函数能生成一个局部作用域，别的都不行**
  // - 每一个函数，都是一个局部作用域

  // 只有函数有局部作用域
  // function fn2() {
  //   // 函数里面就是局部作用域
  //   // 函数里面定义的变量就没有办法在函数外面用
  //   // 一定要用可以通过return的方式

  //   // 局部作用域里面也存在变量提升，只能在内部提升
  //   // 局部作用域里面的变量是不会挂载到window对象下的
  //   console.log("里面打印的" + num);
  //   var num = 100;
  //   return num;
  // }
  // fn2();
  // console.log(window);
  // var num = fn2();
  // console.log("外面打印的" + num);


  // if是没有局部作用域的
  // 哪怕条件不满足，在解析代码的时候也是会做变量提升的
  // if (false) {
  //   var a = 3;
  // }
  // console.log(a);


</script>